<script setup>
import router from "@/router/index.js";
</script>

<template>
  <body>
  <div class = "container">
    <div class = "sticky" style = "margin: 0;">
      <input type = "image" src = "public/img/箭头.png" name = "img" alt = "img" id = "jt"
             @click = "router.push({name:'setting'})">
      <p style = "font-size: 16px;font-weight: bold;position: absolute; left: 155px; top: 35px;">任务</p>
      <p style = "font-size: 16px;font-weight: bold;position: absolute; left: 225px; top: 35px;">成就</p>
    </div>
    <img class = "hl" src = "../../public/img/1.jpg" height = "200" width = "412"
         style = " position: relative; left: -32px; top: 40px;" />
    <main class = "parent">
      <article id = "refreshContainer">
        <div class = "tu">
          <p style = "position: relative; left: 20px; top: 10px;">最近获得</p>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 18px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/3.jpg" height = "60" width = "60"
                 style = "position: relative; left: 5px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 108px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/2.jpg" height = "60" width = "56"
                 style = "position: relative; left: 7px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 198px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/微信图片_20250218085018.jpg" height = "60px" width = "60px"
                 style = "position: relative; left: 5px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 288px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/4.jpg" height = "60" width = "60"
                 style = "position: relative; left: 5px; top: 5px;" /></div>
          <p style = "font-size: 11px; position: relative; left: 30px; top: 78px;">精打细算</p>
          <p style = "font-size: 8px; position: relative; left: 25px; top: 60px; color: #AAAAAA;">2024.12.22 获得</p>
          <p style = "font-size: 11px; position: relative; left: 120px; top: 17px;">小试牛刀</p>
          <p style = "font-size: 8px; position: relative; left: 115px; top: 0; color: #AAAAAA;">2024.8.22 获得</p>
          <p style = "font-size: 11px; position: relative; left: 206px; top: -43px;">季度守护者</p>
          <p style = "font-size: 8px; position: relative; left: 206px; top: -61px; color: #AAAAAA;">2024.3.12 获得</p>
          <p style = "font-size: 11px; position: relative; left: 300px; top: -104px;">初来乍到</p>
          <p style = "font-size: 8px; position: relative; left: 295px; top: -121px; color: #AAAAAA;">2024.8.30 获得</p>
        </div>
        <div class = "tu2">
          <p style = "position: relative; left: 20px; top: 10px;">黑盒历程</p>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 18px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/微信图片_20250218085018.jpg" height = "60px" width = "58"
                 style = "position: relative; left: 7px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 108px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/5.jpg" height = "60" width = "58"
                 style = "position: relative; left: 6px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 198px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/6.jpg" height = "60" width = "58"
                 style = "position: relative; left: 6px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 288px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/7.jpg" height = "60" width = "58"
                 style = "position: relative; left: 6px; top: 5px;" /></div>
          <p style = "font-size: 11px; position: relative; left: 25px; top: 78px;">季度守护者</p>
          <p style = "font-size: 8px; position: relative; left: 17px; top: 60px; color: #AAAAAA;">近一年累计签到 120<br>&emsp;&emsp;&emsp;&emsp;天
          </p>
          <p style = "font-size: 11px; position: relative; left: 120px; top: 5px; color: #AAAAAA;">个人认证</p>
          <p style = "font-size: 8px; position: relative; left: 110px; top: -12px; color: #AAAAAA;">UP主、主播、职业<br>&ensp;选手等个人认证
          </p>
          <p style = "font-size: 11px; position: relative; left: 210px; top: -67px; color: #AAAAAA;">机构认证</p>
          <p style = "font-size: 8px; position: relative; left: 199px; top: -85px; color: #AAAAAA;">媒体、开发商、俱乐<br>&ensp;&ensp;部等机构认证
          </p>
          <p style = "font-size: 11px; position: relative; left: 300px; top: -140px;color: #AAAAAA;">新人作者</p>
          <p style = "font-size: 8px; position: relative; left: 297px; top: -157px; color: #AAAAAA;">达到作者等级1级</p>
        </div>
        <div class = "tu3">
          <p style = "position: relative; left: 20px; top: 10px;">黑盒人生</p>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 18px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/2.jpg" height = "60" width = "56"
                 style = "position: relative; left: 7px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 108px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/8.jpg" height = "60" width = "58"
                 style = "position: relative; left: 7px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 198px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/9.jpg" height = "60" width = "58"
                 style = "position: relative; left: 7px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 288px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/10.jpg" height = "60" width = "58"
                 style = "position: relative; left: 7px; top: 5px;" /></div>
          <p style = "font-size: 11px; position: relative; left: 30px; top: 78px;">小试牛刀</p>
          <p style = "font-size: 8px; position: relative; left: 25px; top: 60px; color: #AAAAAA;">累计消费 200 元</p>
          <p style = "font-size: 11px; position: relative; left: 120px; top: 17px; color: #AAAAAA;">小有名气</p>
          <p style = "font-size: 8px; position: relative; left: 115px; top: 0; color: #AAAAAA;">获得粉丝 100 人</p>
          <p style = "font-size: 11px; position: relative; left: 210px; top: -43px; color: #AAAAAA;">言之有理</p>
          <p style = "font-size: 8px; position: relative; left: 205px; top: -61px; color: #AAAAAA;">获得点赞 100 次</p>
          <p style = "font-size: 11px; position: relative; left: 308px; top: -104px; color: #AAAAAA;">鉴赏家</p>
          <p style = "font-size: 8px; position: relative; left: 292px; top: -121px; color: #AAAAAA;">发布 3
            条获赞超过<br>&ensp;10个的游戏评价</p>
        </div>
        <div class = "tu4">
          <p style = "position: relative; left: 20px; top: 10px;">游戏人生</p>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 18px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/2.jpg" height = "60" width = "58"
                 style = "position: relative; left: 7px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 108px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/4.jpg" height = "60" width = "58"
                 style = "position: relative; left: 7px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 198px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/11.jpg" height = "60" width = "60"
                 style = "position: relative; left: 7px; top: 5px;" /></div>
          <p style = "font-size: 11px; position: relative; left: 30px; top: 78px;">精打细算</p>
          <p style = "font-size: 8px; position: relative; left: 18px; top: 60px; color: #AAAAAA;">在小黑盒领取喜加一<br>&ensp;&ensp;&ensp;游戏
            100 款</p>
          <p style = "font-size: 11px; position: relative; left: 121px; top: 5px;">初来乍到</p>
          <p style = "font-size: 8px; position: relative; left: 112px; top: -12px; color: #AAAAAA;">绑定任意一个平台</p>
          <p style = "font-size: 11px; position: relative; left: 205px; top: -55px; color: #AAAAAA;">百科贡献者</p>
          <p style = "font-size: 8px; position: relative; left: 200px; top: -73px; color: #AAAAAA;">获得 50
            点百科经验</p>
        </div>
        <div class = "tu5">
          <p style = "position: relative; left: 20px; top: 10px;">限量成就</p>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 18px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/12.jpg" height = "60" width = "60"
                 style = "position: relative; left: 5px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 108px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/13.jpg" height = "60" width = "60"
                 style = "position: relative; left: 5px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 198px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/14.jpg" height = "60" width = "60"
                 style = "position: relative; left: 5px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 5px;margin-left: 288px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/15.jpg" height = "60" width = "60"
                 style = "position: relative; left: 5px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 120px;margin-left: 18px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/16.jpg" height = "60" width = "60"
                 style = "position: relative; left: 5px; top: 5px;" /></div>
          <div class = "box"
               style = "position: absolute; margin-top: 120px;margin-left: 108px;width: 70px; height: 70px; border-radius:10px; background-color: rgba(128, 128, 128, 0.05);">
            <img src = "../../public/img/17.jpg" height = "60" width = "60"
                 style = "position: relative; left: 5px; top: 5px;" /></div>
          <p style = "font-size: 11px; position: relative; left: 21px; top: 78px; color: #AAAAAA;">小黑盒一周年</p>
          <p style = "font-size: 8px; position: relative; left: 18px; top: 60px; color: #AAAAAA;">一周年活动连续签到<br>&emsp;&emsp;&emsp;7天
          </p>
          <p style = "font-size: 11px; position: relative; left: 110px; top: 6px; color: #AAAAAA;">2018国庆徽章</p>
          <p style = "font-size: 8px; position: relative; left: 114px; top: -12px; color: #AAAAAA;">国庆连续签到7天</p>
          <p style = "font-size: 11px; position: relative; left: 202px; top: -54px; color: #AAAAAA;">三周年“科技...</p>
          <p style = "font-size: 8px; position: relative; left: 202px; top: -73px; color: #AAAAAA;">参与三周年“科技”<br>&emsp;&emsp;&emsp;阵营
          </p>
          <p style = "font-size: 11px; position: relative; left: 292px; top: -128px; color: #AAAAAA;">三周年“魔法...</p>
          <p style = "font-size: 8px; position: relative; left: 292px; top: -145px; color: #AAAAAA;">
            参与三周年“魔法”<br>&emsp;&emsp;&emsp;阵营</p>
          <p style = "font-size: 11px; position: relative; left: 21px; top: -86px; color: #AAAAAA;">小黑盒三周年</p>
          <p style = "font-size: 8px; position: relative; left: 19px; top: -105px; color: #AAAAAA;">
            完成小黑盒三周年预<br>&emsp;&emsp;&emsp;约</p>
          <p style = "font-size: 11px; position: relative; left: 111px; top: -160px; color: #AAAAAA;">小黑盒六周年</p>
          <p style = "font-size: 8px; position: relative; left: 109px; top: -176px; color: #AAAAAA;">
            小黑盒六周年活动集<br>&ensp;&ensp;&ensp;齐5颗扭蛋</p>
        </div>
      </article>
    </main>
  </div>
  </body>
</template>

<style scoped>
div {
  margin: 10px;
  border: 0;
  padding: 0;
}


.sticky {
  /*position: fixed;*/
  /*top: -1px;*/
  /*left: 0;*/
  /*padding: 5px;*/
  /*background-color: white;*/
  /*width: 412px;*/
  /*height: 80px;*/
  position: fixed;
  top: -20px;
  width: 100%;
  background-color: #333;
  z-index: 2;
}

.container {
  margin: 0 auto;
  width: 412px;
  height: 100%;
}

#jt {
  position: absolute;
  left: 15px;
  top: 42px;
  width: 22px;
  height: auto;
}

.tu {
  position: absolute;
  margin: 0 auto;
  width: 380px;
  height: 150px;
  background-color: rgba(128, 128, 128, 0.03);
  border-radius: 10px;

}

.tu2 {
  position: absolute;
  margin: 160px auto;
  width: 380px;
  height: 165px;
  background-color: rgba(128, 128, 128, 0.03);
  border-radius: 10px;

}

.tu3 {
  position: absolute;
  margin: 335px auto;
  width: 380px;
  height: 165px;
  background-color: rgba(128, 128, 128, 0.03);
  border-radius: 10px;

}

.tu4 {
  position: absolute;
  margin: 510px auto;
  width: 380px;
  height: 165px;
  background-color: rgba(128, 128, 128, 0.03);
  border-radius: 10px;

}

.tu5 {
  position: absolute;
  margin: 685px auto;
  width: 380px;
  height: 275px;
  background-color: rgba(128, 128, 128, 0.03);
  border-radius: 10px;

}

.parent {
  position: static;
  margin-top: 50px;
}

.hl {
  margin-left: 30px;
}
</style>